<template>
  <div class="home">
    <div class="body">
      <div class="buts">
        <el-button class="button-style"
                   :class="selType == 'M' ? 'active' :''"
                   type="primary"
                   @click="changeType('M')">面料下架</el-button>
        <el-button class="button-style"
                   :class="selType == 'C' ? 'active' :''"
                   type="primary"
                   @click="changeType('C')">裁片下架</el-button>
        <el-button class="button-style"
                   :class="selType == 'F' ? 'active' :''"
                   type="primary"
                   @click="changeType('F')">辅料下架</el-button>
        <el-button class="button-style"
                   :class="selType == 'P' ? 'active' :''"
                   type="primary"
                   @click="changeType('P')">成品下架</el-button>
      </div>
      <div class="cont">
        <el-row :gutter="20">
          <el-col :span="2"
                  style="margin:1rem 0;">
            <div class="swiper-q"
                 v-show="carouselArr.length>0"></div>
            <swiper :options="swiperOption"
                    class="swiper-w"
                    ref="mySwiper">
              <swiper-slide class="swiper-slide"
                            v-for="(item,index) in carouselArr"
                            :key="index">
                <!-- <img :src="item" /> -->
                {{item.NodeName}}
              </swiper-slide>
            </swiper>
          </el-col>
          <el-col :span="22">
            <div class="arbitrage-w">
              <table border="1"
                     cellspacing="1"
                     v-html="tableDom">
                <tbody></tbody>
              </table>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import Mixin from '@/components/mixin'
import {
  getArbitrage,
  getCarouselArr,
  getDownHouseMaterielsByShelf,
  offShelf,
  delShelf
} from '@/api/materiel' // 接口
export default {
  name: 'demo',
  data () {
    return {
      dialogtShow: false,
      carouselArr: [],
      swiperOption: {
        // 垂直操作
        direction: 'vertical',
        // 每页显示个数
        slidesPerView: 7,
        // 自动轮播
        autoplay: {
          delay: 2000,
          // 当用户滑动图片后继续自动轮播
          disableOnInteraction: false
        },
        // 开启循环模式
        loop: false,
        // 手形
        grabCursor: true,
        centeredSlides: true,
        height: 500,
        on: {
          // 使用es6的箭头函数，使this指向vue对象
          slideChangeTransitionStart: (dom) => {
            this.realIndex = dom.realIndex
            this.getArbitrage()
          }
        }
      },
      selType: 'M',
      tableDom: '',
      realIndex: 0,
      selTable: {},
      tableList: [],
      setInterval: null
    }
  },
  computed: {},
  components: {},
  mixins: [Mixin], // demo.vue 中声明minix 进行混合
  methods: {
    changeType (type) {
      let vm = this
      vm.selType = type
      vm.realIndex = 0
      vm.getCarouselArr()
      vm.$refs.mySwiper.swiperInstance.slideTo(0)
    },
    getArbitrage () {
      let vm = this
      let params = new FormData()
      if (vm.carouselArr.length === 0) {
        vm.getGoodKWLocation([])
        return
      }
      params.append('ShelfFlnkID', vm.carouselArr[vm.realIndex].FlnkID)
      getArbitrage(params).then((response) => {
        if (response.data) {
          vm.getGoodKWLocation(response.data)
        }
      })
    },
    // 根据仓库标识读取货架列表
    getCarouselArr () {
      let vm = this
      let params = new FormData()
      params.append('WarehouseFlnkID', vm.warehouseFormat(vm.selType))
      params.append('MaterielTypeCode', vm.selType)
      getCarouselArr(params).then((response) => {
        if (response.data.data) {
          vm.carouselArr = response.data.data
          vm.getArbitrage()
        }
      })
    },
    // 渲染table dom
    getGoodKWLocation (data) {
      let vm = this
      // 根据货架标识读取库位列表
      vm.tableDom = ''
      var htmlTr = ''
      if (data != null) {
        var dataList = data.GoodKWLocation
        for (let i = 1; i <= data.MaxLineID + 1; i++) {
          let _temp =
            data.MaxLineID - i + 1 === 0 ? '' : data.MaxLineID - i + 1 + '层'
          if (_temp === '') { htmlTr += '<tr style="height:35px;"><td>' + _temp + '</td>' } else { htmlTr += '<tr><td>' + _temp + '</td>' }
          for (let j = 1; j <= data.MaxColumnID; j++) {
            if (data.MaxLineID === i - 1) {
              htmlTr += '<td>' + j + '</td>'
            }
            var tdItemList = dataList.filter((_item) => {
              return _item.LineID === i && _item.ColumnID === j
            })

            if (tdItemList != null && tdItemList.length > 0) {
              htmlTr +=
                '<td StockPlaceID="' +
                tdItemList[0].StockPlaceID +
                '"ShelfFlnkID="' +
                tdItemList[0].ShelfFlnkID +
                '" class="tdBody" style="' +
                (tdItemList[0].RowSpan > 1 || tdItemList[0].ColSpan > 1
                  ? 'background-color:#00438a;'
                  : '') +
                '" isselected="0" floorid="' +
                tdItemList[0].FloorID +
                '" colid="' +
                tdItemList[0].ColID +
                '" lineid="' +
                tdItemList[0].LineID +
                '" columnid="' +
                tdItemList[0].ColumnID +
                '" rowspan="' +
                tdItemList[0].RowSpan +
                '" colspan="' +
                tdItemList[0].ColSpan +
                '"ondragover="allowDrop(event)"' +
                'ondrop="selectTd(this);">' +
                tdItemList[0].FloorID +
                '-' +
                tdItemList[0].ColID +
                '</td>'
            }
          }
          htmlTr += '</tr>'
        }
      }
      vm.tableDom = htmlTr
      if (vm.carouselArr.length > 0) {
        vm.setArbitrage(vm.carouselArr[vm.realIndex].FlnkID)
      }
    },
    // 往table里面渲染数据
    setArbitrage (flnkID) {
      let vm = this
      let params = new FormData()
      params.append('ShelfFlnkID', flnkID)
      getDownHouseMaterielsByShelf(params).then((response) => {
        if (response.data.result) {
          vm.tableList = response.data.data
          response.data.data.map((item) => {
            let td = `
              <p style="font-size:12px">${item.CustomerName}</p>
              <p style="font-size:12px">${item.StyleName}</p>
              <p style="font-size:12px">${item.MaterielClassName}</p>
              
              `
            let dom = document.querySelector(
              ".arbitrage-w tbody tr td[stockplaceid='" +
                item.WarehouseKWFlnkID +
                "']"
            )
            if (dom !== null) {
              if (item.Tag === 0) {
                td += `<p class="el-icon-close close" onclick="delShelf('${item.WarehouseKWFlnkID}')"></p>`
                dom.innerHTML = td
                dom.style.backgroundColor = 'rgb(242, 242, 242,0.5)'
              }
              if (item.Tag === 2) {
                td += `<p class="el-icon-caret-bottom close" onclick="makeSure('${item.WarehouseKWFlnkID}')"></p>`
                dom.innerHTML = td
              }
            }
          })
        }
      })
    },
    makeSure (id) {
      let vm = this
      vm.selTable = vm.tableList.filter((item) => {
        return item.WarehouseKWFlnkID === id
      })[0]
      vm.$confirm('确认下架？')
        .then((_) => {
          vm.offShelf()
        })
        .catch((_) => {})
    },
    // 下架
    offShelf () {
      let vm = this
      let params = {
        BarCode: vm.selTable.BarCode,
        TaskType: 0,
        ShelfFlnkID: vm.selTable.ShelfFlnkID,
        HouseFlnkID: vm.selTable.WarehouseKWFlnkID,
        TotalCount: Math.ceil(vm.selTable.TotalCount),
        TotalWeight: vm.selTable.TotalWeight
      }
      offShelf(params).then((response) => {
        if (response.data.result) {
          vm.$message('下架成功')
          vm.setArbitrage(vm.carouselArr[vm.realIndex].FlnkID)
        } else {
          vm.$message(response.data.error)
          vm.changeType(vm.selType)
        }
      })
    },
    // 撤销下架
    delShelf (houseFlnkID) {
      let vm = this
      let params = new FormData()
      params.append('HouseFlnkID', houseFlnkID)
      delShelf(params).then((response) => {
        if (response.data.result) {
          vm.changeType(vm.selType)
          // 把之前的要清掉（？？？这里重新渲染不会清拖动之前的？？？）
          let _temp = document.querySelector(
            ".arbitrage-w tbody tr td[stockplaceid='" + houseFlnkID + "']"
          )
          if (_temp) {
            _temp.innerHTML =
              _temp.getAttribute('floorid') +
              '-' +
              _temp.getAttribute('columnid')
            _temp.style.backgroundColor = ''
          }
        } else {
          vm.$message(response.data.error)
          vm.changeType(vm.selType)
        }
      })
    }
  },
  watch: {},
  mounted () {
    let vm = this
    vm.getCarouselArr()
    window.makeSure = vm.makeSure // 绑定dom原生onclick方法到vue对象方法
    window.delShelf = vm.delShelf // 绑定dom原生onclick方法到vue对象方法
    clearInterval(vm.setInterval)
    vm.setInterval = setInterval(() => {
      if (vm.carouselArr.length > 0) {
        vm.setArbitrage(vm.carouselArr[vm.realIndex].FlnkID)
      }
    }, 5000)
  },
  beforeDestroy: function () {
    let vm = this
    clearInterval(vm.setInterval)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
@import '~@/css/materiel/offShelf.scss';
</style>
